<template>
  <el-dialog class="edit-box" :title="dialog.title" :visible.sync="dialog.visible" append-to-body top="5vh"
             width="680px">
    <el-form class="editInfo" ref="editInfo" :model="editInfo.data" :rules="editInfo.rules" size="small"
             label-width="120px">
      <el-form-item label="工装类型" prop="type">
        <el-select v-model="editInfo.data.type" filterable placeholder="请选择工装类型">
          <el-option label="请选择" value=""></el-option>
          <el-option label="四件套" :value="1"></el-option>
          <el-option label="六件套" :value="2"></el-option>
          <!--<el-option v-for="(item, index) in leaderList" :key="`${item.nickName}${index}`" :label="item.nickName"
                     :value="item.userId"></el-option>-->
        </el-select>
      </el-form-item>
      <el-form-item label="发放人" prop="sendName">
        <el-input v-model="editInfo.data.sendName" placeholder="请输入发放人姓名"></el-input>
      </el-form-item>
      <el-form-item label="发放时间" prop="sendTime">
        <el-date-picker
          v-model="editInfo.data.sendTime"
          type="date"
          placeholder="发放时间"
          value-format="yyyy-MM-dd"
          style="width: 100%;">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input type="textarea" v-model="editInfo.data.remark" rows="3"
                  placeholder="请输入备注"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialog.visible = false">取消</el-button>
      <el-button type="primary" @click="handleEditSubmit">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { debounce } from 'lodash'
  import { createUniformAPI, updateUniformAPI } from '@/api/employee/uniform'

  export default {
    name: 'UniformEdit',
    inheritAttrs: true,
    mixins: [],
    components: {},
    data() {
      return {
        dialog: {
          status: 'create',
          visible: false, // 是否显示
          title: '添加'
        },
        formParams: { // 编辑需要的参数
          type: '',
          sendName: '',
          sendTime: '',
          remark: ''
        },
        editInfo: { // 编辑表单
          id: undefined,
          data: {
            ...this.formParams
          },
          rules: {
            type: [
              { required: true, message: '请选择工装类型', trigger: 'change' }
            ],
            sendName: [
              { required: true, message: '请输入发放人姓名', trigger: 'blur' }
            ],
            sendTime: [
              { required: true, message: '请选择发放时间', trigger: 'change' }
            ],
            remark: [
              { required: true, message: '请输入备注', trigger: 'blur' }
            ]
          },
          disabled: false // 处理编辑，某些项禁止编辑
        },
        detailInfo: null
      }
    },
    props: {
      visible: {
        type: [Boolean],
        required: true,
        default: false
      },
      detailData: {
        type: Object,
        default() {
          return null
        }
      },
      employeeId: {
        type: String,
        default: ''
      }
    },
    computed: {},
    methods: {
      handleEditSubmit: debounce(function() { // 编辑，提交，防抖
        this.$refs['editInfo'].validate((valid) => {
          if (valid) {
            if (this.editInfo.id) {
              this.updateData()
            } else {
              this.createData()
            }
          }
        })
      }, 300),
      async createData() { // 添加－请求数据
        try {
          let { employeeId } = this
          let response = await createUniformAPI({
            ...this.editInfo.data,
            ...{
              employeeId
            }
          })
          let result = response
          if (+result.code === 200) {
            this.dialog.visible = false
            this.$notify({
              title: '成功',
              message: '添加成功！',
              type: 'success',
              duration: 2000
            })
            this.$emit('create')
          } else {
            this.$notify.error({
              title: '错误',
              message: result.msg || '添加失败！'
            })
          }
        } catch (error) {
          // console.log(error)
          this.$notify.error({
            title: '错误',
            message: error.message || '添加失败！'
          })
        }
      },
      async updateData() { // 修改－请求数据
        try {
          let { employeeId } = this
          let response = await updateUniformAPI({
            ...this.editInfo.data,
            ...{
              id: this.editInfo.id,
              employeeId
            }
          })
          let result = response
          if (+result.code === 200) {
            this.dialog.visible = false
            this.$notify({
              title: '成功',
              message: '修改成功',
              type: 'success',
              duration: 2000
            })
            this.$emit('update')
          } else {
            this.$notify.error({
              title: '错误',
              message: result.msg || '编辑失败！'
            })
          }
        } catch (error) {
          // console.log(error)
          this.$notify.error({
            title: '错误',
            message: error.message || '编辑失败！'
          })
        }
      },
      async resetEditData(data = null) { // 重置编辑表单
        this.dialog.status = data ? 'update' : 'create'
        this.dialog.title = data ? '编辑' : '添加'
        // this.dialog.visible = true
        this.editInfo.id = undefined
        this.editInfo.disabled = false
        this.editInfo.data = {
          ...this.formParams
        }
        if (data) { // 编辑
          // this.editInfo.id = data.uuid
          this.editInfo.id = data.id
          Object.keys(this.formParams).forEach((item) => {
            this.editInfo.data[item] = data[item]
          })
          this.editInfo.disabled = true
        }
      },
      async initEditDialog(data = null) { // 编辑－显示弹出框
        await this.resetEditData(data)
        this.$nextTick(() => {
          this.$refs['editInfo'].clearValidate()
        })
      }
    },
    watch: {
      visible(newVal, oldVal) {
        if (newVal !== this.dialog.visible) {
          this.dialog.visible = newVal
          if (newVal) {
            this.initEditDialog(this.detailData)
          }
        }
      },
      'dialog.visible'(newVal, oldVal) {
        this.$emit('update:visible', newVal)
      }
    },
    created() {
    },
    mounted() {
    }
  }
</script>

<style lang="scss" scoped>
  .editInfo {
    margin-right: 50px;
  }

  .el-cascader,
  .el-select {
    width: 100%;
  }
</style>
